<template>
	<view class="coupon-container page-container">

		<!-- 优惠券分类 -->
		<view class="coupon-tabs">
			<view class="tab-item" v-for="(tab, index) in tabs" :key="index" :class="{ active: activeTab === index }"
				@click="switchTab(index)">
				<text class="tab-text">{{ tab.name }}</text>
			</view>
		</view>
		<!-- 领券中心入口 -->
		<view class="coupon-center" v-if="activeTab === 0">
			<view class="center-content" @click="toCouponCenter">
				<view class="center-left">
					<u-icon name="gift" size="32" color="#1c705e"></u-icon>
					<view class="center-info">
						<text class="center-title">领券中心</text>
						<text class="center-desc">更多优惠券等你来领</text>
					</view>
				</view>
				<u-icon name="arrow-right" size="16" color="#999"></u-icon>
			</view>
		</view>
		<!-- 优惠券列表 -->
		<view class="coupon-list">
			<view class="coupon-item" v-for="(coupon, index) in couponsList" :key="index">
				<view class="coupon-left" :class="'coupon-' + getCouponClass(coupon.coupon_status)">
					<view v-if="coupon.content_type===3" class="coupon-amount">
						<text class="amount-value">{{ coupon.discount }}</text>
						<text class="amount-symbol">折</text>
					</view>
					<view v-else class="coupon-amount">
						<text class="amount-symbol">¥</text>
						<text class="amount-value">{{ coupon.coupon_amount }}</text>
					</view>
					<text v-if="coupon.content_type===1" class="coupon-condition">满 {{ coupon.threshold }} 元可用</text>
				</view>
				<view class="coupon-right">
					<view class="coupon-info">
						<text class="coupon-name">{{ coupon.coupon_name }}</text>
						<text class="coupon-desc">{{ coupon.coupon_scene }}</text>
						<text class="coupon-time">有效期：{{ $tools.yyyymmddFormat(coupon.coupon_end_time) }}</text>
					</view>
					<view class="coupon-actions">
						<button class="use-btn" v-if="coupon.coupon_status === 2" @click="useCoupon(coupon)">
							立即使用
						</button>
						<text class="status-text" v-else :class="'status-' + getCouponClass(coupon.coupon_status)">
							{{ getStatusText(coupon.coupon_status) }}
						</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-if="couponsList.length === 0">
			<image src="@/static/images/cart-green.png" mode="aspectFit" class="empty-image">
			</image>
			<text class="empty-text">{{ getEmptyText() }}</text>
			<button class="get-coupon-btn" @click="getCoupons" v-if="activeTab === 0">领取优惠券</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 0,
				// 2-可用 5-已用 3-已过期
				tabs: [{
						name: '可用',
						status: 2
					},
					{
						name: '已用',
						status: 5
					},
					{
						name: '已过期',
						status: 3
					}
				],
				hasSearched: false,
				recordCount: 0,
				page: 1,
				limit: 10,
				couponsList: []
			}
		},
		computed: {

		},
		onLoad(options) {
			// 如果是选择优惠券模式
			if (options.type === 'select') {
				this.isSelectMode = true
			}
			this.onSearch();
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh() {
			if (!this.hasSearched) {
				this.page = 1
				this.recordCount = 0
				this.couponsList = []
				this.loadDataList()
			}
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {
			// 下拉触底，先判断是否有请求正在进行中
			// 以及检查当前请求页数是不是小于数据总页数，如符合条件，则发送请求
			const page = this.page
			const limit = this.limit
			const recordCount = this.recordCount
			if (!this.hasSearched && page * limit < recordCount) {
				this.page++
				setTimeout(() => {
					this.loadDataList()
				}, 500)
			}
		},
		methods: {
			// 重新重新事件
			onSearch() {
				this.page = 1
				this.recordCount = 0
				this.couponsList = []
				this.loadDataList()
			},
			loadDataList() {
				// 加载数据列表
				if (this.hasSearched) {
					return false
				}

				this.hasSearched = true
				this.$api.user.GetCouponList({
					page: this.page,
					limit: this.limit,
					coupon_status: this.tabs[this.activeTab].status
				}).then(res => {
					this.hasSearched = false
					this.recordCount = res.count
					this.couponsList = this.couponsList.concat(res.data)
				}).catch(err => {
					this.hasSearched = false
					if (this.page > 0) {
						this.page--
					}
				})
			},

			// 切换标签
			switchTab(index) {
				this.activeTab = index
				this.onSearch()
			},

			// 使用优惠券
			useCoupon(coupon) {
				if (this.isSelectMode) {
					// 选择模式下，返回选中的优惠券
					const pages = getCurrentPages()
					const prevPage = pages[pages.length - 2]
					if (prevPage) {
						prevPage.$vm.selectCouponEvent(coupon)
					}
					setTimeout(() => {
						uni.navigateBack()
					}, 50)
				} else {
					// 正常模式下，跳转到商城使用
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},

			// 获取优惠券样式类
			getCouponClass(status) {
				const statusMap = {
					1: 'available',
					2: 'available',
					3: 'expired',
					4: 'expired',
					5: 'used'
				}
				return statusMap[status] || ''
			},

			// 获取状态文本 优惠券状态：1-未生效，2-生效中，3-已过期，4-已作废，5-已核销
			getStatusText(status) {
				const statusMap = {
					1: '未生效',
					2: '生效中',
					3: '已过期',
					4: '已作废',
					5: '已使用'
				}
				return statusMap[status] || ''
			},

			// 获取状态样式类
			getStatusClass(status) {
				return `status-${status}`
			},

			// 获取空状态文本
			getEmptyText() {
				const textMap = {
					1: '暂无可用优惠券',
					2: '暂无可用优惠券',
					3: '暂无已过期优惠券',
					4: '暂无已作废优惠券',
					5: '暂无已使用优惠券'
				}
				return textMap[this.activeTab] || '暂无优惠券'
			},

			// 领取优惠券
			getCoupons() {
				this.toCouponCenter()
			},

			// 跳转到领券中心
			toCouponCenter() {
				uni.navigateTo({
					url: '/pages/user/coupon-center'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coupon-container {
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	.coupon-stats {
		background-color: #ffffff;
		display: flex;
		padding: 40rpx;
		margin-bottom: 20rpx;
	}

	.stats-item {
		flex: 1;
		text-align: center;
	}

	.stats-number {
		font-size: 48rpx;
		font-weight: bold;
		color: #1c705e;
		margin-bottom: 8rpx;
		display: block;
	}

	.stats-label {
		font-size: 26rpx;
		color: #666;
		display: block;
	}

	.coupon-tabs {
		background-color: #ffffff;
		display: flex;
		margin-bottom: 20rpx;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 30rpx 0;
		position: relative;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 4rpx;
		background-color: #1c705e;
	}

	.tab-text {
		font-size: 28rpx;
		color: #666;
	}

	.tab-item.active .tab-text {
		color: #1c705e;
		font-weight: bold;
	}

	.coupon-list {
		padding: 0 20rpx;
	}

	.coupon-item {
		background-color: #ffffff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		display: flex;
	}

	.coupon-left {
		width: 200rpx;
		padding: 40rpx 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.coupon-available {
		background: linear-gradient(135deg, #1c705e 0%, #2d8a6e 100%);
		color: #ffffff;
	}

	.coupon-used {
		background-color: #f5f5f5;
		color: #999;
	}

	.coupon-expired {
		background-color: #f5f5f5;
		color: #999;
	}

	.coupon-left::after {
		content: '';
		position: absolute;
		right: -10rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 20rpx;
		height: 20rpx;
		background-color: #f8f8f8;
		border-radius: 50%;
	}

	.coupon-amount {
		display: flex;
		align-items: baseline;
		margin-bottom: 12rpx;
	}

	.amount-symbol {
		font-size: 24rpx;
	}

	.amount-value {
		font-size: 48rpx;
		font-weight: bold;
	}

	.coupon-condition {
		font-size: 22rpx;
		opacity: 0.9;
	}

	.coupon-right {
		flex: 1;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.coupon-info {
		flex: 1;
	}

	.coupon-name {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
		display: block;
	}

	.coupon-desc {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 12rpx;
		display: block;
	}

	.coupon-time {
		font-size: 22rpx;
		color: #999;
		display: block;
	}

	.coupon-actions {
		margin-left: 20rpx;
	}

	.use-btn {
		background-color: #1c705e;
		color: #ffffff;
		border: none;
		border-radius: 20rpx;
		padding: 12rpx 24rpx;
		font-size: 24rpx;
	}

	.status-text {
		font-size: 24rpx;
		padding: 12rpx 24rpx;
	}

	.status-used {
		color: #999;
	}

	.status-expired {
		color: #ff4757;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 200rpx 40rpx;
	}

	.empty-image {
		width: 240rpx;
		height: 240rpx;
		margin-bottom: 40rpx;
	}

	.empty-text {
		font-size: 32rpx;
		color: #999;
		margin-bottom: 60rpx;
	}

	.get-coupon-btn {
		background-color: #1c705e;
		color: #ffffff;
		border: none;
		border-radius: 40rpx;
		padding: 20rpx 60rpx;
		font-size: 28rpx;
	}

	.coupon-center {
		background-color: #ffffff;
		margin: 20rpx;
		border-radius: 16rpx;
		padding: 40rpx;
	}

	.center-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.center-left {
		display: flex;
		align-items: center;
	}

	.center-info {
		margin-left: 20rpx;
	}

	.center-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
		display: block;
	}

	.center-desc {
		font-size: 24rpx;
		color: #666;
		display: block;
	}
</style>